<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
  <script type="text/javascript" src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
  <style>
      /**************************************************
* tab
**************************************************/

.tab{
  display: flex;
  background-color: #EFC0B8;
  padding: 10px 15px 0 15px;
  font-size: 14px;
}
.tab-item{
  position: relative;
  background-color: transparent;
  padding: 10px 15px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  transition: .2s;
}
.tab-item::before,.tab-item::after{
  position: absolute;
  bottom: 0;
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0 0 0 40px transparent;
  transition: .2s;
}
.tab-item::before{
  left: -20px;
  clip-path: inset(50% -10px 0 50%);
}
.tab-item::after{
  right: -20px;
  clip-path: inset(50% 50% 0 -10px);
}

.tab-item:hover{
  background-color: #F2D0CA;
  /* color: #000; */
}
.tab-item:hover::before,
.tab-item:hover::after{
  box-shadow: 0 0 0 30px #F2D0CA;
}
.tab-item.active{
  background-color: #F8EAE7;
  z-index: 1;
  /* color: #000; */
}
.tab-item.active::before,
.tab-item.active::after{
  box-shadow: 0 0 0 30px #F8EAE7;
}


.d3 {
  margin-left: 100px;

  transform-style: preserve-3d;
  transform: perspective(450px);
  position: relative;
  width: 50px;
  height: 50px;
  background-color: lightpink;
  border-radius: 100%;
}

.d3::before {
  display: block;
  position: absolute;
  bottom: 0;

  content: '';
  width: 100%;
  height: 100%;
  border: 6px solid green;
  border-radius: 100%;
  transition: transform 0.15s ease-in-out;
  transform-style: preserve-3d;
  perspective: 450px;
  translate: 0 0 30px;
}

.d3::after {
  content: '';
  position: absolute;
  background: url(/img/avatar2.jpg) no-repeat center 100%;
  background-size: 90%;
  width: 100%;
  height: 100%;
  border-radius: 0 0 900px 900px;
  display: block;
  left: 0;
  bottom: 0;
  transform: rotateX(-10deg);
  transform-origin: 50% 60%;
  transition: 0.15s ease-in-out;
  translate: 0 0 30px;
}

/* 悬停状态 */
.d3:hover::after {
  width: 95%;
  height: 115%;
  left: 2.5%;
  background-size: 115%;
}
.d3:hover::before {
  transform: scale(0.95) translateY(2.5%);
}

/* 树形结构 */
.tree {
  flex: 1;
  overflow: auto;
  padding: 4px 0;
  position: relative;
}
.tree summary {
  outline: 0;
  padding-left: 30px;
  list-style: none;
  background: repeating-linear-gradient(90deg, #999 0 1px, transparent 0px 2px)
    0px 50%/20px 1px no-repeat;
  /* background: linear-gradient(#999,#999) 0px 50%/20px 1px no-repeat; */
}
.tree details:last-child {
  background-size: 1px 23px;
}
.tree > details:not(:last-child) > details:last-child {
  background-size: 1px 100%;
}
.tree details {
  padding-left: 40px;
  background: repeating-linear-gradient(#999 0 1px, transparent 0px 2px) 40px
    0px/1px 100% no-repeat;
  /* background: linear-gradient(#999, #999) 40px 0px/1px 100% no-repeat; */
}
.tree > details {
  background: none;
  padding-left: 0;
}
.tree > details > summary {
  background: none;
}
.tree summary {
  display: flex;
  align-items: center;
  height: 46px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
  cursor: default;
}
.tree summary::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 38px;
  background: #eef2ff;
  border-radius: 8px;
  z-index: -1;
  opacity: 0;
  transition: 0.2s;
}
.tree summary:hover::after {
  opacity: 1;
}
.tree summary:not(:only-child)::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 8px;
  border: 1px solid #999;
  background: linear-gradient(#999, #999) 50%/1px 10px no-repeat,
    linear-gradient(#999, #999) 50%/10px 1px no-repeat;
}
.tree details[open] > summary::before {
  background: linear-gradient(#999, #999) 50%/10px 1px no-repeat;
}



      .fancyAvatar {
  --s: 200px; /* image size */
  --b: 6px; /* border thickness */
  --c: #ae3ec9; /* border color */
  --cb: #e9ecef; /* background color */
  --f: 1; /* initial scale */

  width: var(--s);
  aspect-ratio: 1;
  padding-top: calc(var(--s)/5);
  cursor: pointer;
  border-radius: 0 0 999px 999px;
  --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
  --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
  outline: var(--b) solid var(--c);
  outline-offset: var(--_o);
  background:
    radial-gradient(
      circle closest-side,
      var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
     ) var(--_g);
  -webkit-mask:
    linear-gradient(#000 0 0) no-repeat
     50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
    radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
  transform: scale(var(--f));
  transition: .5s;
}
img:hover {
  --f: 1.4; /* hover scale */
}

  </style>
</head>
<body>

    asdf
    <wavy></wavy>
    2434

    <hr>


    <form …>
        <input id="x" type="hidden" name="content">
        <trix-editor input="x"></trix-editor>
      </form>

      <img class="fancyAvatar" src="public/img/avatar2.jpg" alt="Adam argyle" >

      <h1>纯 css 树形效果</h1>
      <div class="tree" id="tree">
        <details>
          <summary class="tree-item">
            项目1
          </summary>
          <details>
            <summary class="tree-item">
              文件夹
            </summary>
            <details>
              <summary class="tree-item">
                sdd
              </summary>
            </details>
          </details>
          <details>
            <summary class="tree-item">
              chrome test
            </summary>
          </details>
        </details>
        <details>
          <summary class="tree-item">
            项目2
          </summary>
          <details>
            <summary class="tree-item">
              文件夹2-1
            </summary>
            <details>
              <summary class="tree-item">
                文件夹2-1-1
              </summary>
              <details>
                <summary class="tree-item">
                  文件夹2-1-1-1
                </summary>
                <details>
                  <summary class="tree-item">
                    文件夹2-1-1-1-1
                  </summary>
                  <details>
                    <summary class="tree-item">
                      文件夹2-1-1-1-1-1
                    </summary>
                  </details>
                </details>
              </details>
            </details>
          </details>
        </details>
        <details>
          <summary class="tree-item">
            文件夹1
          </summary>
          <details>
            <summary class="tree-item">
              文件夹
            </summary>
          </details>
          <details>
            <summary class="tree-item">
              文件夹2
            </summary>
          </details>
        </details>
        <details>
          <summary class="tree-item">
            项目3
          </summary>
          <details>
            <summary class="tree-item">
              文件夹1
            </summary>
            <details>
              <summary class="tree-item">
                1
              </summary>
              <details>
                <summary class="tree-item">
                  文件夹2
                </summary>
              </details>
            </details>
          </details>
          <details>
            <summary class="tree-item">
              文件夹
            </summary>
          </details>
          <details>
            <summary class="tree-item">
              文件夹
            </summary>
          </details>
          <details>
            <summary class="tree-item">
              文件夹
            </summary>
          </details>
          <details>
            <summary class="tree-item">
              文件夹的副本
            </summary>
          </details>
          <details>
            <summary class="tree-item">
              点点点
            </summary>
          </details>
          <details>
            <summary class="tree-item">
              hewei
            </summary>
            <details>
              <summary class="tree-item">
                hewei02
              </summary>
            </details>
          </details>
        </details>
      </div>


      <h1>圆角导航</h1>
      <nav class="tab">
        <a class="tab-item">Svelte API</a>
        <a class="tab-item active">Svelte API</a>
        <a class="tab-item">Svelte API</a>
        <a class="tab-item">Svelte API</a>
      </nav>


      <style>
        .hover-squiggle {
          background: linear-gradient(to bottom, #1d9bf0 0%, #1d9bf0 100%);
          background-position: 0 100%;
          background-repeat: repeat-x;
          background-size: 2px 2px;
          color: inherit;
          text-decoration: none;
        }

        .hover-squiggle:hover {
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%231d9bf0' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
          background-size: auto 4px;
        }


        .input-box {
          display: flex;
          align-items: center;
          max-width: 300px;
          background: #fff;
          border: 1px solid #a0a0a0;
          border-radius: 4px;
          padding-left: 0.5rem;
          overflow: hidden;
          font-family: sans-serif;
        }

        .input-box .prefix {
          font-weight: 300;
          font-size: 14px;
          color: #999;
        }

        .input-box input {
          flex-grow: 1;
          font-size: 14px;
          background: #fff;
          border: none;
          outline: none;
          padding: 0.5rem;
        }

        .input-box:focus-within {
          border-color: #777;
        }



        .checkbox-symbol {
          position: absolute;
          width: 0;
          height: 0;
          pointer-events: none;
          user-select: none;
        }

        .checkbox-container {
          box-sizing: border-box;
          background: #ffffff;
          color: #222;
          height: 64px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: row wrap;
        }

        .checkbox-container * {
          box-sizing: border-box;
        }

        .checkbox-input {
          position: absolute;
          visibility: hidden;
        }

        .checkbox {
          user-select: none;
          cursor: pointer;
          padding: 6px 8px;
          border-radius: 6px;
          overflow: hidden;
          transition: all 0.3s ease;
          display: flex;
        }

        .checkbox:not(:last-child) {
          margin-right: 6px;
        }

        .checkbox:hover {
          background: rgba(0, 119, 255, 0.06);
        }

        .checkbox span {
          vertical-align: middle;
          transform: translate3d(0, 0, 0);
        }

        .checkbox span:first-child {
          position: relative;
          flex: 0 0 18px;
          width: 18px;
          height: 18px;
          border-radius: 4px;
          transform: scale(1);
          border: 1px solid #cccfdb;
          transition: all 0.3s ease;
        }

        .checkbox span:first-child svg {
          position: absolute;
          top: 3px;
          left: 2px;
          fill: none;
          stroke: #fff;
          stroke-dasharray: 16px;
          stroke-dashoffset: 16px;
          transition: all 0.3s ease;
          transform: translate3d(0, 0, 0);
        }

        .checkbox span:last-child {
          padding-left: 8px;
          line-height: 18px;
        }

        .checkbox:hover span:first-child {
          border-color: #0077ff;
        }

        .checkbox-input:checked + .checkbox span:first-child {
          background: #0077ff;
          border-color: #0077ff;
          animation: zoom-in-out 0.3s ease;
        }

        .checkbox-input:checked + .checkbox span:first-child svg {
          stroke-dashoffset: 0;
        }

        @keyframes zoom-in-out {
          50% {
            transform: scale(0.9);
          }
        }





        .radio-container {
          box-sizing: border-box;
          background: #ffffff;
          color: #222;
          height: 64px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: row wrap;
        }

        .radio-container * {
          box-sizing: border-box;
        }

        .radio-input {
          appearance: none;
          background-color: #ffffff;
          width: 16px;
          height: 16px;
          border: 1px solid #cccfdb;
          margin: 0;
          border-radius: 50%;
          display: grid;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }

        .radio-input::before {
          content: "";
          width: 6px;
          height: 6px;
          border-radius: 50%;
          transform: scale(0);
          transition: 0.3s transform ease-in-out;
          box-shadow: inset 6px 6px #ffffff;
        }

        .radio-input:checked {
          background: #0077ff;
          border-color: #0077ff;
        }

        .radio-input:checked::before {
          transform: scale(1);
        }

        .radio {
          cursor: pointer;
          padding: 6px 8px;
        }

        .radio:not(:last-child) {
          margin-right: 6px;
        }
        </style>

        <div class="p-4">
            <p>The <a class="hover-squiggle" href="#">中华人民共和国</a> swam along gracefully.</p>

                <div class="input-box">
            <span class="prefix">+30</span>
            <input type="tel" placeholder="210 123 4567"/>
            </div>

            <svg class="checkbox-symbol">
                <symbol id="check" viewbox="0 0 12 10">
                    <polyline
                    points="1.5 6 4.5 9 10.5 1"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    ></polyline>
                </symbol>
                </svg>

                <div class="checkbox-container">
                <input class="checkbox-input" id="apples" type="checkbox" />
                <label class="checkbox" for="apples">
                    <span>
                    <svg width="12px" height="10px">
                        <use xlink:href="#check"></use>
                    </svg>
                    </span>
                    <span>Apples</span>
                </label>
                <input class="checkbox-input" id="oranges" type="checkbox" />
                <label class="checkbox" for="oranges">
                    <span>
                    <svg width="12px" height="10px">
                        <use xlink:href="#check"></use>
                    </svg>
                    </span>
                    <span>Oranges</span>
                </label>
                </div>



                <div class="radio-container">
                    <input class="radio-input" id="apples1" type="radio" name="fruit" />
                    <label class="radio" for="apples1">Apples</label>
                    <input class="radio-input" id="oranges1" type="radio" name="fruit" />
                    <label class="radio" for="oranges1">Oranges</label>
                </div>
        </div>


      <h1>帖子列表</h1>
      <ul class="feed-list list-unstyled">
        <?php foreach ($posts[0] as $post): ?>
            <li class="feed-item d-flex" data-href="/post/show/<?= $post->id ?>" data-pid="<?= $post->id ?>">
                <a class="avatar" href="/user/profile/<?= $post->user_id ?>" data-letters="<?= mb_substr($post->username, 0, 1, 'UTF-8'); ?>"></a>
                <div class="d-flex flex-column w-100">
                    <div class="d-flex align-items-center">
                        <a class="link-dark fw-bold fs-15 post-meta" href="/user/profile/<?= $post->user_id ?>"><?= $post->username; ?></a>
                        <a class="link-muted fs-15" href="/post/show/<?= $post->id ?>"><?= nice_time($post->created_at) ?></a>
                    </div>
                    <p class="typo-text"><?= $post->content ?></p>
                    <?php if($post->images > 0): ?>
                        <?php if($post->type === 'gif'): ?>
                            <img class="img-fluid rounded align-self-baseline mt-2" data-gifffer="/upload/<?= $post->name ?>" alt="" loading="lazy" decoding="async">
                        <?php else: ?>
                            <img class="img-fluid rounded align-self-baseline mt-2" src="/upload/<?= $post->name ?>" alt="" loading="lazy" decoding="async">
                        <?php endif ?>
                    <?php endif ?>
                </div>
                <div class="feed-item-count">
                    <spap class="post-num">
                        <i><?= $post->comments ?></i>
                        <span class="list-triangle-border"></span>
                        <span class="list-triangle-body"></span>
                    </spap>
                </div>
            </li>
        <?php endforeach; ?>
    </ul>


    <ul class="feed-list list-unstyled">
        <?php foreach ($posts[0] as $post): ?>
            <li class="feed-item d-flex tap" data-href="/post/show/<?= $post->id ?>" data-pid="<?= $post->id ?>">
                <div class="feed-item-count">
                    <spap class="post-num">``
                        <i><?= $post->comments ?></i>
                        <span class="list-triangle-border"></span>
                        <span class="list-triangle-body"></span>
                    </spap>
                </div>
                <div class="d-flex flex-column w-100">
                    <p class="typo-text fs-16"><?= $post->content ?></p>
                    <?php if($post->images > 0): ?>
                        <?php if($post->type === 'gif'): ?>
                            <img class="img-fluid feed-img rounded align-self-baseline mt-2" data-gifffer="/upload/<?= $post->name ?>" alt="" loading="lazy" decoding="async">
                        <?php else: ?>
                            <img class="img-fluid feed-img rounded align-self-baseline mt-2" src="/upload/<?= $post->name ?>" alt="" loading="lazy" decoding="async">
                        <?php endif ?>
                    <?php endif ?>
                    <div class="d-flex align-items-center mt-1">
                        <a class="link-dark fs-15 post-meta" href="/user/profile/<?= $post->user_id ?>"><?= $post->username; ?></a>
                        <a class="link-muted fs-15" href="/post/show/<?= $post->id ?>"><?= nice_time($post->created_at) ?></a>
                    </div>
                </div>

            </li>
        <?php endforeach; ?>
    </ul>

    <ul class="feed-list list-unstyled border-top">
        <?php if(!$posts[0]): ?>
            <div class="placeholder fs-28">無</div>
        <?php else: ?>
            <?php foreach ($posts[0] as $post): ?>
                <li class="feed-item d-flex tap" data-href="/post/show/<?= $post->id ?>" data-pid="<?= $post->id ?>">
                    <a class="avatar" href="/user/profile/<?= $post->user_id ?>" data-letters="<?= mb_substr($post->username, 0, 1, 'UTF-8'); ?>"></a>
                    <div class="d-flex flex-column w-100">
                        <div class="d-flex align-items-center">
                            <a class="link-dark fw-bold fs-15 post-meta" href="/user/profile/<?= $post->user_id ?>"><?= $post->username; ?></a>
                            <a class="link-muted fs-15" href="/post/show/<?= $post->id ?>"><?= nice_time($post->created_at) ?></a>
                            <div class="ms-auto">
                                <i class="iconfont icon-comment-o"></i>
                                <?= $post->comments ?>
                            </div>
                        </div>
                        <p class="typo-text"><?= $post->content ?></p>
                        <?php if($post->images > 0): ?>
                            <?php if($post->type === 'gif'): ?>
                                <img class="feed-item-img align-self-baseline mt-2" data-gifffer="/upload/<?= $post->filename ?>" alt="" loading="lazy" decoding="async">
                            <?php else: ?>
                                <img class="feed-item-img align-self-baseline mt-2" src="<?= thumb($post->filename) ?>" alt="" loading="lazy" decoding="async">
                            <?php endif ?>
                        <?php endif ?>
                    </div>
                </li>
            <?php endforeach; ?>
        <?php endif ?>
    </ul>


    <div class="d-flex p-3">
        <a href="javascript:" class="impress impress_c1">
            <span class="impress_in">我是中，我是中国人</span>我是中，我&nbsp;<span class="impress_triangle">◆</span>
        </a>
        <a href="javascript:" class="impress impress_c2">成熟大气</a>
        <a href="javascript:" class="impress impress_c3">
            <span class="impress_in">骨子里很好色</span>骨子里很好&nbsp;<span class="impress_triangle">◆</span>
        </a>
        <a href="javascript:" class="impress impress_c4">慷慨大方</a>
        <a href="javascript:" class="impress impress_c5">直爽</a>
        <a href="javascript:" class="impress impress_c6">不拘小节</a>
        <a href="javascript:" class="impress impress_c6">随性</a>
    </div>



    <div id="jsSwitchNext" class="p-3">
      <img class="shadow-macOS" src="/img/avatar.png" alt="screenshot">
      <img class="shadow-macOS hidden" src="/img/avatar2.jpg" alt="screenshot">
      <img class="shadow-macOS hidden" src="/img/404.png" alt="screenshot">
      <img class="shadow-macOS hidden" src="/img/404-2.png" alt="screenshot">
  </div>
  <nav id="jsSwitchNav">
      <a class="active" href="#">Quick Open</a>
      <a href="#" class="">Search</a>
      <a href="#" class="">Go to Heading</a>
      <a href="#" class="">Command Palette</a>
  </nav>
</body>
</html>